<template>
	<view class="modify-phone-container">
		<!-- 页面标题 -->
	<!-- 	<view class="header">
			<text class="title">修改手机号</text>
		</view> -->

		<!-- 修改表单 -->
		<view class="modify-form">
			<!-- 提示文字 -->
		<!-- 	<view class="prompt-text">
				请输入新手机号
			</view> -->

			<!-- 新手机号输入 -->
			<view class="form-item">
				<!-- <view class="form-label">请输入手机号</view> -->
				<view class="input-wrapper">
					<u-input
						v-model="newPhoneNumber"
						placeholder="请输入手机号"
						type="tel"
						maxlength="11"
						:border="false"
						@blur="validateNewPhone"
						 
					></u-input>
				</view>
				<view v-if="phoneError" class="error-tip">{{ phoneError }}</view>
			</view>

			<!-- 验证码输入 -->
			<view class="form-item">
				<!-- <view class="form-label">请输入验证码</view> -->
				<view class="code-input-wrapper">
					<view class="code-input">
						<u-input
							v-model="verificationCode"
							placeholder="请输入验证码"
							type="number"
							maxlength="4"
							:border="false"
							@input="onCodeInput"
						></u-input>
					</view>
					<view class="code-btn-wrapper">
						<u-button 
							:custom-style="codeButtonStyle"
							@click="getVerificationCode"
							:disabled="codeButtonDisabled"
						>
							{{ codeButtonText }}
						</u-button>
					</view>
				</view>
			</view>

			<!-- 确定按钮 -->
			<view class="confirm-btn-wrapper">
				<u-button 
					:custom-style="confirmButtonStyle"
					@click="confirmModify"
					:disabled="!canConfirm"
				>
					确定
				</u-button>
			</view>
		</view>

		<!-- 数字键盘 -->
		<view class="keyboard-container">
			<!-- 完成按钮 -->
			<view class="done-btn" @click="hideKeyboard">
				完成
			</view>
			
			<!-- 数字键盘 -->
			<view class="keyboard">
				<view 
					class="key-row"
					v-for="(row, rowIndex) in keyboardKeys" 
					:key="rowIndex"
				>
					<view 
						class="key-item"
						v-for="(key, keyIndex) in row" 
						:key="keyIndex"
						@click="onKeyPress(key)"
					>
						<text class="key-text">{{ key.text }}</text>
						<text v-if="key.subText" class="key-sub-text">{{ key.subText }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 新手机号
				newPhoneNumber: '',
				phoneError: n,
				
				// 验证码
				verificationCode: '',
				countdown: 0,
				timer: null,
				
				// 数字键盘
				keyboardKeys: [
					[
						{ text: '1' },
						{ text: '2', subText: 'ABC' },
						{ text: '3', subText: 'DEF' }
					],
					[
						{ text: '4', subText: 'GHI' },
						{ text: '5', subText: 'JKL' },
						{ text: '6', subText: 'MNO' }
					],
					[
						{ text: '7', subText: 'PQRS' },
						{ text: '8', subText: 'TUV' },
						{ text: '9', subText: 'WXYZ' }
					],
					[
						{ text: '', subText: '' },
						{ text: '0' },
						{ text: '⌫', subText: '' }
					]
				]
			}
		},
		computed: {
			// 验证码按钮样式
			codeButtonStyle() {
				return {
					backgroundColor: this.countdown > 0 ? '#ccc' : '#ff4757',
					color: '#fff',
					fontSize: '24rpx',
					height: '80rpx',
					lineHeight: '60rpx',
					borderRadius: '6rpx',
					width: '200rpx'
				};
			},
			
			// 验证码按钮文本
			codeButtonText() {
				return this.countdown > 0 ? `${this.countdown}s` : '获取验证码';
			},
			
			// 验证码按钮是否禁用
			codeButtonDisabled() {
				return this.countdown > 0 || !this.newPhoneNumber || this.phoneError != '';
			},
			
			// 确定按钮样式
			confirmButtonStyle() {
				return {
					backgroundColor: this.canConfirm ? '#ff4757' : '#ccc',
					color: '#fff',
					fontSize: '32rpx',
					height: '88rpx',
					lineHeight: '88rpx',
					borderRadius: '8rpx',
					width: '100%'
				};
			},
			
			// 是否可以确认
			canConfirm() {
				return this.newPhoneNumber && 
					   !this.phoneError && 
					   this.verificationCode.length === 4;
			}
		},
		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			// 验证新手机号
			validateNewPhone() {
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!this.newPhoneNumber) {
					this.phoneError = '请输入手机号';
				} else if (!phoneRegex.test(this.newPhoneNumber)) {
					this.phoneError = '请输入正确的手机号格式';
				} else {
					this.phoneError = '';
				}
			},
			
			// 验证码输入处理
			onCodeInput(value) {
				this.verificationCode = value;
			},
			
			// 获取验证码
			getVerificationCode() {
				if (this.codeButtonDisabled) return;
				
				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
				
				// 模拟发送验证码
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
			},
			
			// 键盘按键处理
			onKeyPress(key) {
				if (key.text === '⌫') {
					// 删除键
					if (this.verificationCode.length > 0) {
						this.verificationCode = this.verificationCode.slice(0, -1);
					}
				} else if (key.text && key.text !== '') {
					// 数字键
					if (this.verificationCode.length < 4) {
						this.verificationCode += key.text;
					}
				}
			},
			
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			
			// 确认修改
			confirmModify() {
				if (!this.canConfirm) return;
				
				// 验证验证码（这里简单验证，实际项目中应该调用接口）
				if (this.verificationCode !== '1234') {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
					return;
				}
				
				// 模拟修改成功
				uni.showLoading({
					title: '修改中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '手机号修改成功',
						icon: 'success'
					});
					
					// 更新本地存储的手机号
					uni.setStorageSync('currentPhone', this.newPhoneNumber);
					
					// 返回账户安全页面
					setTimeout(() => {
						uni.navigateBack({
							delta: 2 // 返回两层，跳过身份验证页面
						});
					}, 1500);
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modify-phone-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	// 页面标题
	.header {
		background-color: #fff;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #eee;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	// 修改表单
	.modify-form {
		flex: 1;
		background-color: #fff;
		padding: 40rpx;
	}
	
	// 提示文字
	.prompt-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 40rpx;
		text-align: center;
	}
	
	// 表单项
	.form-item {
		margin-bottom: 40rpx;
		
		.form-label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.input-wrapper {
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0;
		}
		
		.error-tip {
			font-size: 24rpx;
			color: #ff4757;
			margin-top: 10rpx;
		}
	}
	
	// 验证码输入区域
	.code-input-wrapper {
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.code-input {
			flex: 1;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0;
		}
		
		.code-btn-wrapper {
			flex-shrink: 0;
		}
	}
	
	// 确定按钮
	.confirm-btn-wrapper {
		margin-top: 60rpx;
	}
	
	// 键盘容器
	.keyboard-container {
		background-color: #f0f0f0;
		padding: 20rpx;
	}
	
	// 完成按钮
	.done-btn {
		text-align: right;
		padding: 20rpx;
		font-size: 28rpx;
		color: #007aff;
	}
	
	// 数字键盘
	.keyboard {
		.key-row {
			display: flex;
			margin-bottom: 10rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
		
		.key-item {
			flex: 1;
			height: 100rpx;
			background-color: #fff;
			margin: 0 5rpx;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			
			&:active {
				background-color: #e0e0e0;
			}
			
			.key-text {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}
			
			.key-sub-text {
				font-size: 20rpx;
				color: #999;
				margin-top: 4rpx;
			}
		}
	}
</style> 